<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>华联</title>
    <meta name=App-Config content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta content=yes name=apple-mobile-web-app-capable>
    <meta content=yes name=apple-touch-fullscreen>
    <meta content="telephone=no,email=no" name=format-detection>
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html{
            font-size: 20px;
            height: 100%;
        }
        body{
            height: 100%;
            overflow: hidden;
            padding-left: 13%;
        }
        h2{
            font-size: 2rem;
            text-align: center;
            margin-top: 6rem;
            width: 100%;
            height: 3rem;
            color: #dd047e;
        }
        input,#searchBtn,#brand,#btn{
            width: 80%;
            height: 4rem;
            margin-top: 2rem;
            outline: none;
            border: 2px solid #dd047e;
            border-radius:4px;
            font-size: 1.5rem;
            color: #999;
            text-indent: 10px;
        }
        #searchBtn{
            color: #999;
        }
        #img{
            width: 10rem;
            height: 7rem;
            vertical-align: middle;
            margin-right: 3.8rem;
            margin-top: 2rem;
        }
        #imgBtn{
            width: 30%;
            height: 5rem;
            background:#dd047e  ;
            border-radius: 6px;
            color: #fff;
            border: none;
        }
        #searchBtn{
            width: 22%;
            color: #fff;
            background:#dd047e ;
            height: 4.2rem;
            text-indent: 0 !important;
        }
        #phone{
            width: 56%;
            margin-right: 8px;
        }
        #btn{
            color: #dd047e;
            background: #45177d;
        }
        .layui{
            width: 16rem;
            height: 6rem;
            background: rgba(0,0,0,0.5);
            color: #fff;
            font-size: 1.4rem;
            text-align: center;
            line-height: 6rem;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -8rem;
            margin-top: -4rem;
            display: none;
        }
        .layui2{
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: rgba(0,0,0,0.3);
        }
        .layui2 .con{
            width: 80%;
            height: 12rem;
            position: absolute;
            left: 10%;
            top: 50%;
            margin-top: -6rem;
            border: 1px solid #45177d;
            border-radius: 6px;
            background: #fff;
            text-align: center;
        }
        .layui2 .con p{
            margin-top: 1rem;
            line-height: 2rem;
            font-size: 1.2rem;
            color: #45177d;
        }
        .layui2 .con button{
            margin-top: 4px;
            width: 5rem;
            height: 3rem;
            border-radius: 4px;
            border-color: #45177d;
            color: #dd047e;
        }
        .regBox,.luBox{
            display: none;
        }
        .layui2 .con .reg,.layui2 .con .lu{
            border: none;
            background: #dd047e;
            color:#45177d;
        }
        #brand{
            width: 40%;
        }
        #imgBtn{
            margin-right: 4px;
        }
        #div1{
            position: relative;
        }
        #div1 div{
            width: 32rem;
            height: 100rem;
            background: rgba(0,0,0,0.4);
            position: absolute;
            left: -4rem;
            top: 1.5rem;
        }
    </style>
    <script>
        function fn() {
            document.documentElement.style.fontSize=document.documentElement.clientWidth*20/640+'px';
        }
        document.addEventListener('DOMContextLoaded',fn,false)
        window.addEventListener('resize',fn);
        window.addEventListener('orientationchange',fn);
        window.addEventListener('load',fn);

    </script>
</head>
<body>
    <h2>积分录入</h2>
    <input type="text" id="phone" placeholder="录入的手机号码"><button id="searchBtn">查询</button>
    <div id="div1">
        <div></div>
    </div>
    <input type="number" id="price" placeholder="消费金额必须是数字"> <br>
    <select id="brand">
    </select> <br>
    <input type="number" id="num" placeholder="数量">
    <img id="img" src="../../images/imgbg.png" alt=""><button id="imgBtn">选择本地照片上传收银条</button>
    <input type="file" id="file" style="display: none">
    <br>
    <button id="btn">录入</button>

    <div id="yes" class="layui">
        注册成功
    </div>
    <div id="yes2" class="layui">
        查询成功
    </div>
    <div class="layui2 regBox">
        <div class="con">
            <p>该用户还未注册</p>
            <p>是否要代为用户注册?</p>
            <p>
                <button class="reg">是</button>
                <button class="regNo">取消</button>
            </p>
        </div>
    </div>
    <div class="layui2 luBox">
        <div class="con">
            <p>已经录入完毕</p>
            <p>是否继续录入</p>
            <p>
                <button class="lu">是</button>
                <button class="luNo">取消</button>
            </p>
        </div>
    </div>
    <div id="no1" class="layui">
        金额必须填写！
    </div>
    <div id="no2" class="layui">
        品牌必须选择！
    </div>
    <div id="no3" class="layui">
        数量必须填写！
    </div>
    <div id="no4" class="layui">
        必须先上传照片！
    </div>
    <div id="no5" class="layui">
        图片只能是jpg、png 格式!
    </div>
    <div id="no6" class="layui">
        图片大小不能超过 100MB!
    </div>
</body>
</html>
<script src="../../../utils/zepto.min.js"></script>
<script src="../../../utils/baseUrl.js"></script>
<script>
    var brandId ;
    function beforeAvatarUpload (file) {
        const isJPG = file.type === "image/jpeg" || file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 100;
        if (!isJPG) {
            $('#no5').css('display','block');
            setTimeout(function () {
                $('#no5').css('display','none');
            },1000)
        }
        if (!isLt2M) {
            $('#no6').css('display','block');
            setTimeout(function () {
                $('#no6').css('display','none');
            },1000)
        }
        if (!isJPG || !isLt2M) {
            return false;
        }
        //let me = this;
        let reader = new FileReader();
        reader.readAsDataURL(file);

        return new Promise(function(resolve, reject) {
            reader.onload = function(e) {
                resolve();
                //图片大于100K压缩
                //if (file.size > 1024 * 1024 * 0.1) {
                let img = new Image();
                //img.src = this.result;
                img.onload = function() {
                    let originWidth = img.width;
                    let originHeight = img.height;
                    let canvas = document.createElement("canvas");
                    let context = canvas.getContext("2d");
                    canvas.width = 512; //压缩后的宽度
                    canvas.height = (originHeight * canvas.width) / originWidth;
                    context.drawImage(img, 0, 0, canvas.width, canvas.height);
                    resolve(canvas.toDataURL("image/jpeg"));
                };
                //} else {
                //me.form.image = this.result;
                //}
            };
        });

        //return src; //isJPG && isLt2M;
    }


    $('#searchBtn').click(function () {
        $.ajax({
            url:baseUrl+'/user?phone='+$('#phone').val()
            ,type:'post'
            ,dataType:"json"
            ,headers:{handlerType:"login"}
            ,success:function (res) {
                console.log(res.code)
                if(res.code==0){
                    $('.regBox').css('display','block');
                }else{
                   $('#div1').css('display','none')
                }
            }
        })
    });

    $('#price').keyup(function () {
        var reg=/[^0-9]/g;
        $('#price').val($('#price').val().replace(reg,''));
    });

    $.ajax({
        type:'post',
        url:baseUrl+'/brand'
        ,type:'post'
        ,dataType:"json"
        ,headers:{handlerType:"selectAll"}
        ,success:function (res) {
            // console.log(res)
            $('#brand').html("")

            for(var i=0;i<res.data.length;i++){
                $("#brand").append(`<option brand-id="${res.data[i].id}">${res.data[i].name}</option>`)
            }

        }
    });

    $('#imgBtn').click(function () {
        $('#file').click();
    });

    function dataURLtoFile(dataurl, filename) {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1];
        if(!filename) {//若无文件名则取当前时间戳
            filename = Date.parse(new Date()) + '.jpg';
        }
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, {type:mime});
    }

    $('#file')[0].onchange=function () {
        var file=this.files[0];
        const isJPG = file.type === "image/jpeg" || file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 100;
        if (!isJPG) {
            $('#no5').css('display','block');
            setTimeout(function () {
                $('#no5').css('display','none');
            },1000)
        }
        if (!isLt2M) {
            $('#no6').css('display','block');
            setTimeout(function () {
                $('#no6').css('display','none');
            },1000)
        }
        if (!isJPG || !isLt2M) {
            return false;
        }
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            //图片大于100K压缩
            //if (file.size > 1024 * 1024 * 0.1) {
            let img = new Image();
            img.src = this.result;
            img.onload = function() {
                let originWidth = img.width;
                let originHeight = img.height;
                let canvas = document.createElement("canvas");
                let context = canvas.getContext("2d");
                canvas.width = 512; //压缩后的宽度
                canvas.height = (originHeight * canvas.width) / originWidth;
                context.drawImage(img, 0, 0, canvas.width, canvas.height);

                var bbb=dataURLtoFile(canvas.toDataURL("image/jpeg"))
                var formData=new FormData();
                formData.append('file',bbb);
                $.ajax({
                    url:baseUrl+'/upload?type=receipt',
                    processData:false,
                    contentType:false,
                    headers:{
                       // 'token':window.localStorage.getItem('token')
                    },
                    type:'post',
                    data:formData,
                    dataType:"json",
                    success:function (res) {
                        console.log(res)
                        if(res.code==0){
                            fileName=res.img;
                            $('#img').attr('src',baseUrl+fileName);
                        }
                    }

                })
            };
        };
    };
    $("#brand").change(function(){
        $("#brand option").each(function(i,v){
            if(v.selected){
                brandId = $(v).attr("brand-id");
            }

        })

    })

    $('#btn').click(function () {

        if($('#price').val()==''){
            $('#no1').css('display','block');
            setTimeout(function () {
                $('#no1').css('display','none');
            },1000)
            return false;
        }
        if($('#brand').val()==''){
            $('#no2').css('display','block');
            setTimeout(function () {
                $('#no2').css('display','none');
            },1000)
            return false;
        }
        if($('#num').val()==''){
            $('#no3').css('display','block');
            setTimeout(function () {
                $('#no3').css('display','none');
            },1000)
            return false;
        }

        if(fileName==''){
            $('#no4').css('display','block');
            setTimeout(function () {
                $('#no4').css('display','none');
            },1000)
            return false;
        }

        $.ajax({
            type:'post',
            url:baseUrl+'/user',
            headers:{
                'type':'newPoints'
            },
            data:{
                phone:$('#phone').val(),
                brandPoints:$('#price').val(),
                brandId:brandId,
                brandName:$('#brand').val(),
                num:$('#num').val(),
                img:fileName
            },
            dataType:"json",
            success:function (res) {
                console.log(res.code)
                if(res.code==1){
                    $('.luBox').css('display','block')
                }
            }
        })
    });

    $('.reg').click(function () {
        window.location.href='register2.html';
    });
    $('.regNo').click(function () {
        $('.regBox').css('display','none');
        $('#phone').val('');
        fileName='';
    });

    $('.lu').click(function () {
        window.location.reload();
        /*$('#price').val('');
        $('#num').val('');
        fileName='';
        $('#img').attr('src','../images/imgbg.png')*/
    });

    $('.luNo').click(function () {
        window.location.href='operation.html';
    });
    $('#phone')[0].onfocus=function () {
        $('#price').val('');
        $('#num').val('');
        fileName='';
        $('#img').attr('src','../../images/imgbg.png')
        $('#div1').css('display','block')
    };
</script>







